<template>
  <div class='container'>
    <el-dialog
      :visible="visible"
      title="预览文章"
      @close="close"
      >
      <!-- 文章头部 -->
      <div  >
        <h3>{{ nodeData.title }}</h3>
        <span>{{ nodeData.createTime | time }}</span>
        <span>{{ nodeData.username }}</span>
        <span>
          <i class="el-icon-view">{{ nodeData.visits }}</i>
        </span>
      </div>
      <!-- 文章内容 -->
      <div class="contenet" >
        <div v-html="nodeData.articleBody"></div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'ArticlesPreview',
  props: {
    visible: {
      required: true,
      type: Boolean
    },
    nodeData: {
      required: true,
      type: Object
    }
  },
  methods: {
    close () {
      this.$emit('update:visible', false)
    }
  },
  filters: {
    // 时间过滤器
    time (input) {
      if (input) {
        return input.replace(input.slice(-5), '').replace(/[a-z,A-Z]/, ' ')
      }
    }
  }
}
</script>

<style scoped lang='scss'>
  ::v-deep {
    .el-dialog__body {
      padding: 0 20px 10px 20px;
      span {
        display: inline-block;
        margin-right: 10px;
      }
      .contenet {
        background: #f5f5f5;
        padding: 10px 8px;
        margin-top: 8px;
        border-top: dotted 1px #000;
      }
    }
  }
</style>
